import React, {PureComponent} from 'react'
import BasePie from '../../component/chart/base-pie'
import {connect} from 'react-redux'
import {setTitle, scale} from '../chart/util/common'
import BaseLine from '../chart/base-line'
import {millToString} from '../../util/util'

class Line extends PureComponent {
    shouldComponentUpdate(nextProps) {
        return nextProps.exceptionClose !== this.props.exceptionClose
    }

    renderDate = (data) => {
        const exceptionClose = data.toJS()
        return {
            title: '问题单及时关闭率',
            xAxisData: Object.keys(exceptionClose).length
            && exceptionClose[Object.keys(exceptionClose)[0]].map(close => millToString(close.dt)),
            option: {
                yAxis: {
                    min: 0,
                    max: 100,
                    axisLabel: {
                        formatter: '{value}%'
                    }
                },
                title: {
                    textStyle: {
                        color: '#5BE2EF',
                        fontSize: 14 * scale,
                        fontWeight: 'bolder'
                    }
                }
            },
            yAxisData: Object.keys(exceptionClose).map(key => {
                return {
                    name: key,
                    data: exceptionClose[key].map(close => (close.value * 100).toFixed(2))
                }
            })
        }
    }

    render() {
        const {exceptionClose} = this.props
        const data = this.renderDate(exceptionClose)
        return (
            <BaseLine config={data}/>
        )
    }

}


function mapStoreToProps({exceptionClose}) {
    return {
        exceptionClose
    }
}

export default connect(mapStoreToProps)(Line)